<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>商品信息查询</title>
<link href="/lib/layui-v2.6.3/css/layui.css" rel="stylesheet">

</head>
<body>
	<div style="margin: 10px 0px 0px 10px">
		<div class="layui-inline">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input id="input1" type="text" class="layui-input">
			</div>
			<input id="searchBtn" type="button" value="搜索" class="layui-btn">
			<input id="addBtn" type="button" value="添加商品" class="layui-btn">
		</div>
	</div>

	<table id="commodityTable" lay-filter="table1"></table>

	<script type="text/html" id=operateTemplate>

           <input type="button" class="layui-btn layui-btn-xs" value="编辑" lay-event="edit">
           <input type="button" class="layui-btn layui-btn-xs layui-btn-danger" value="删除" lay-event="del">
    </script>
	<script id="commodityTemplate" type="text/html">
		<form class="layui-form" lay-filter="commodityForm">
			<div class="layui-form-item">
				
   				 <label class="layui-form-label">商品名称</label>
   				 <div class="layui-input-inline">
					<input type="hidden" name="commId"/>
					<input type="hidden" name="action" value="save"/>
      				<input type="text" name="commName" autocomplete="off" placeholder="请输入商品名" class="layui-input">
    			</div>
			</div>
			<div class="layui-form-item">
   				 <label class="layui-form-label">生产厂家</label>
   				 <div class="layui-input-inline">
      				<input type="text" name="commManufacturer" autocomplete="off" placeholder="请输入生产厂家" class="layui-input">
    			</div>
			</div>
			<div class="layui-form-item">
   				 <label class="layui-form-label">型号</label>
   				 <div class="layui-input-inline">
      				<input type="text" name="commMarking" autocomplete="off" placeholder="请输入型号" class="layui-input">
    			</div>
			</div>
			<div class="layui-form-item">
   				 <label class="layui-form-label">规格</label>
   				 <div class="layui-input-inline">
      				<input type="text" name="commSpecifications" autocomplete="off" placeholder="请输入规格" class="layui-input">
    			</div>
			</div>			
			<div class="layui-form-item">
   				 <label class="layui-form-label">剩余数量</label>
   				 <div class="layui-input-inline">
      				<input type="text" name="commQuantity" autocomplete="off" placeholder="请输入数量" class="layui-input">
    			</div>
			</div>			
			<div class="layui-form-item">
    			<div class="layui-input-block">
      				<button id="saveBtn" type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
    			</div>
  			</div>						
		</form>		

	</script>

	<script src="/lib/layui-v2.6.3/layui.js"></script>
	<script type="text/javascript">
	
	layui.use([ "table" ,"layer","laydate","form"], function() {
		var table = layui.table;
		var $ = layui.jquery;
		var layer=layui.layer;
		var laydate=layui.laydate;
		var form=layui.form;
		
		$("#addBtn").on("click",function(){
			layer.open({
				type:1,
				area:["400px","320px"],
				title:"新增商品",
				content:$("#commodityTemplate").html()
			});			
		});
	
		
		$("body").on("click","#saveBtn",function(){
			var data = form.val("commodityForm");
			$.post("/commodity",data,function(){
				layer.closeAll();
				$("#searchBtn").click();
			});
		});
		
		$("#searchBtn").on("click",function(){
			
			table.render({
				elem : "#commodityTable",
				url : "/commodity",
				where:{keyword:$("#input1").val(),action:"list"},
				cols : [ [ {
					title : "ID",
					field : "commId"
				}, {
					title : "商品名称",
					field : "commName"
				}, {
					title : "生产厂家",
					field : "commManufacturer"
				}, {
					title : "商品种类",
					field : "commMarking"
				}, {
					title : "商品品种",
					field : "commSpecifications"
				}, {
					title : "剩余数量",
					field : "commQuantity"
				},
				
				{title: '操作',toolbar: '#operateTemplate', align: "center"}
				] ],
				page : true,
				limit:5,
				limits:[5,10,15,20]
			});				
		});
		//用代码点了一下搜索
		$("#searchBtn").click();

		table.on("tool(table1)",function(obj){
			if(obj.event=="edit"){				
				$.get("/commodity?action=sel&&id="+obj.data.commId,function(m){
					
					layer.open({
						type:1,
						area:["400px","320px"],
						title:"编辑商品",
						content:$("#commodityTemplate").html()
					});	

					form.val("commodityForm",m);
				});					
			}
			
			if(obj.event=="del"){
				layer.confirm("您确定要删除此商品吗？",function(){
					$.post("/commodity",{id:obj.data.commId,action:"delete"},function(){
						layer.closeAll();
						$("#searchBtn").click();
					});
				});
			}
		})					
	});
	</script>
</body>
</html>